<template>
<footer>
    <ul>
        <li @click="navClick(index)"  :class="{iconfont:true,[item.icon]:true, active:ssIndex== index}" v-for="(item,index) in footlist" :key="index
        "><span class="iconfont"></span><p>{{item.name}}</p></li>
        <!-- <li><span class="iconfont">&#x33;</span>首页</li>
        <li><span class="iconfont">&#x33;</span>首页</li>
        <li><span class="iconfont">&#x33;</span>首页</li> -->
    </ul>
</footer>
</template>

<script>
import "../../assets/font/iconfont"
export default {
    data(){
        return{
            ssIndex:1,
            footlist:[
                {icon:'icon-home',name:'首页'},
                {icon:'icon-xitongrizhi',name:'爆爆团'},
                {icon:'icon-zhuantiguanli',name:'订单'},
                {icon:'icon-yonghu',name:'我的'},
            ]
        }
    },
    methods:{
        navClick(index){
            return (this.ssIndex = index)
        }
    }

}
</script>

<style scoped>
footer{
    width:100vw;
    height:13.3333vw;
    border-top: .2667vw solid gainsboro;
    position: fixed;
    bottom: 0;
    background-color: white;
}
ul{
    list-style: none;
    display: flex;
    height:13.3333vw;
    align-items: center;
    justify-content: space-around;
}
ul li{
    display: flex;
    flex-direction: column;
    text-align: center;
}
ul li.active{
    color: rgb(0, 157, 219);
}
.iconfont{
    font-size: 7vw;
}
p{
    font-size: 2.1333vw;
}
</style>